<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/dolphin">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body class="dolphin-layout-page">
    <div class="layui-card">
        <div class="layui-card-header dolphin-card-header">
            <span><i class="fa fa-bars"></i> 博文管理管理</span>
            <i class="layui-icon layui-icon-refresh refresh-btn"></i>
        </div>
        <div class="layui-card-body">
            <div class="layui-row dolphin-card-screen">
                <div class="pull-left layui-form-pane dolphin-search-box">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block dolphin-search-status">
                            <select class="dolphin-search-select" name="status" mo:dict="SEARCH_STATUS" mo-selected="${param.status}"></select>
                        </div>
                    </div>
                    <div class="layui-inline ">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" th:value="${article.title}" placeholder="请输入标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <input type="text" name="content" th:value="${article.content}" placeholder="请输入内容" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">创建时间</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="createDate" th:value="${param.createDate}" placeholder="请输入创建时间" autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="layui-inline">
                        <label class="layui-form-label">分类</label>
                        <div class="layui-input-block">
                            <input class="layui-input select-tree"  style="width: 250px;"   th:attr="data-url=@{/system/cate/list},data-value=${article?.cate.id},data-name='cate.id'" type="text" name="cate.cnName"   placeholder="选择类别" th:value="${article?.cate.cnName}" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn dolphin-search-btn">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="pull-right screen-btn-group">
                    <button class="layui-btn open-popup" data-title="添加博文管理" th:attr="data-url=@{/system/article/add}" data-size="max">
                        <i class="fa fa-plus"></i> 写文章</button>
                    <button class="layui-btn open-popup" data-title="添加博文管理" th:attr="data-url=@{/system/article/set}" data-size="auto">
                        <i class="fa fa-plus"></i> 设置</button>
                    <!--<div class="btn-group">-->
                        <!--<button class="layui-btn">操作<span class="caret"></span></button>-->
                        <!--<dl class="layui-nav-child layui-anim layui-anim-upbit">-->
                            <!--<dd><a class="ajax-status" th:href="@{/system/article/status/ok}">启用</a></dd>-->
                            <!--<dd><a class="ajax-status" th:href="@{/system/article/status/freezed}">冻结</a></dd>-->
                            <!--<dd><a class="ajax-status" th:href="@{/system/article/status/delete}">删除</a></dd>-->
                        <!--</dl>-->
                    <!--</div>-->
                </div>
            </div>
            <div class="dolphin-table-wrap layui-form">
                <table class="layui-table dolphin-table"  style="table-layout: fixed">
                    <thead>
                    <tr>
                        <!--<th class="dolphin-table-checkbox">-->
                            <!--<label class="dolphin-checkbox"><input type="checkbox">-->
                                <!--<i class="layui-icon layui-icon-ok"></i></label>-->
                        <!--</th>-->
                        <th>主键ID</th>
                        <th>标题</th>
                        <th>副标题</th>
                        <th>类别</th>
                        <th>摘要</th>
                        <th>是否可以评论</th>
                        <th>置顶</th>
                        <th>创建时间</th>
                        <th>数据状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="item:${list}">
                        <!--<td><label class="dolphin-checkbox"><input type="checkbox" th:value="${item.id}">-->
                            <!--<i class="layui-icon layui-icon-ok"></i></label></td>-->
                        <td th:text="${item.id}">主键ID</td>
                        <td ><a th:href="'/article/'+${item.id }" th:text="${item.title}" target="_blank"></a></td>
                        <td ><a th:href="'/article/'+${item.id }" th:text="${item.xtitle}" target="_blank"></a></td>
                        <td th:text="${item.cate.cnName}">类别</td>
                        <td style="width:500px;" th:text="${item.summary}">主题</td>
                        <td><input type="checkbox" name="commented" th:value="${item.id}" th:title="评论"   lay-filter="commented" th:checked="${item.commented  } == false ? 'false':'true'"></td>
                        <td><input type="checkbox" name="top" th:value="${item.id}" th:title="置顶" lay-filter="top"   th:checked="${item.top  } == false ? 'false':'true'"></td>
                        <td th:text="${#dates.format(item.updateDate, 'yyyy-MM-dd HH:mm:ss')}">更新时间</td>
                        <td th:text="${#dicts.dataStatus(item.status)}">数据状态</td>
                        <td>
                            <a class="open-popup" data-title="编辑博文管理" th:attr="data-url=@{'/system/article/edit/'+${item.id}}" data-size="max" href="#">编辑</a>
                            <a class="open-popup" data-title="详细信息" th:attr="data-url=@{'/system/article/detail/'+${item.id}}" data-size="800,600" href="#">详细</a>
                            <a class="ajax-get" data-msg="您是否确认删除" th:href="@{/system/article/status/delete(ids=${item.id})}">删除</a>
                            <a class="ajax-get" th:if="${item.status!=1}" data-msg="启用" th:href="@{/system/article/status/ok(ids=${item.id})}">启用</a>
                            <a class="ajax-get" th:if="${item.status == 1}  " data-msg="冻结" th:href="@{/system/article/status/freezed(ids=${item.id})}">冻结</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div th:replace="/common/fragment :: page"></div>
        </div>
    </div>
<script th:replace="/common/template :: script"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/dolphinTree.js}"></script>
    <script th:inline="javascript">
        //Demo
        layui.use('form', function(){
            var form = layui.form;

            form.on('checkbox(top)', function (obj) {

              $.post("/system/article/update/top/" + this.value, {top: obj.elem.checked}, function (json) {
                  if (json.code == 200) {
                      layer.tips(((obj.elem.checked) ? "已置顶" : "取消置顶"), obj.othis);
                  }else {
                      layer.tips(json.msg, obj.othis);
                  }
                });
            });
            form.on('checkbox(commented)', function (obj) {
                $.post("/system/article/update/commented/" + this.value, {commented: obj.elem.checked}, function (json) {
                    if (json.code == 200) {
                        layer.tips(((obj.elem.checked) ? "可评论" : "不可评论"), obj.othis);
                    }else {
                        layer.tips(json.msg, obj.othis);
                    }
                });
            });
        });

        // 初始化下拉树
        $.fn.selectTree({
            rootTree: '顶级菜单',
            // 选中后事件

            onSelected: sortRender
        });

        // 更新渲染排序下拉选项
        function sortRender(treeNode) {
            // alert(1111);
            // var pid = treeNode.id;
            // var sort = $(".select-sort");
            // var id = sort.data('id') ? sort.data('id') : 0;
            // var url = sort.data('url') + "/" + pid + "/" + id;
            // $.get(url, function (result) {
            //     var options = '';
            //     var sortNum = Object.keys(result).length;
            //     if(pid === $(".select-tree").data('value') && sort.data('sort')){
            //         sortNum = sort.data('sort') - 1;
            //     }
            //     result[0] = "首位";
            //     for(var key in result){
            //         var selected = sortNum == key ? "selected=''" : "";
            //         options += "<option value='"+ key +"' " + selected + ">"+ result[key] +"</option>";
            //     }
            //     alert(options);
            //     sort.html(options);
            //     form.render('select');
            // });
        }
    </script>
</body>
</html>
